{% extends "base.html" %}

{% block page_title %}添加设备{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h4><i class="fas fa-plus"></i> 添加网络设备</h4>
            </div>
            <div class="card-body">
                <form method="POST">
                    {{ form.hidden_tag() }}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                {{ form.name.label(class="form-label") }}
                                {{ form.name(class="form-control") }}
                                {% if form.name.errors %}
                                    <div class="text-danger">
                                        {% for error in form.name.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                {{ form.ip_address.label(class="form-label") }}
                                {{ form.ip_address(class="form-control", placeholder="例如: 192.168.1.1") }}
                                {% if form.ip_address.errors %}
                                    <div class="text-danger">
                                        {% for error in form.ip_address.errors %}
                                            <small>{{ error }}</small>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        {{ form.device_type.label(class="form-label") }}
                        {{ form.device_type(class="form-select") }}
                        {% if form.device_type.errors %}
                            <div class="text-danger">
                                {% for error in form.device_type.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-3">
                        {{ form.description.label(class="form-label") }}
                        {{ form.description(class="form-control", rows="3", placeholder="可选：设备的详细描述信息") }}
                        {% if form.description.errors %}
                            <div class="text-danger">
                                {% for error in form.description.errors %}
                                    <small>{{ error }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ url_for('devices') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> 返回设备列表
                        </a>
                        {{ form.submit(class="btn btn-primary") }}
                    </div>
                </form>
            </div>
        </div>
        
        <!-- 帮助信息 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5><i class="fas fa-info-circle"></i> 添加设备说明</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>设备类型说明：</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-wifi text-primary"></i> <strong>路由器：</strong>网络路由设备</li>
                            <li><i class="fas fa-sitemap text-info"></i> <strong>交换机：</strong>网络交换设备</li>
                            <li><i class="fas fa-server text-success"></i> <strong>服务器：</strong>服务器设备</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>IP地址格式：</h6>
                        <ul class="list-unstyled">
                            <li>• 标准IPv4格式：192.168.1.1</li>
                            <li>• 确保IP地址在有效范围内</li>
                            <li>• 系统会自动检查设备连通性</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// IP地址格式验证
document.getElementById('ip_address').addEventListener('input', function(e) {
    const ip = e.target.value;
    const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    
    if (ip && !ipRegex.test(ip)) {
        e.target.classList.add('is-invalid');
    } else {
        e.target.classList.remove('is-invalid');
    }
});

// 表单提交前验证
document.querySelector('form').addEventListener('submit', function(e) {
    const name = document.getElementById('name').value.trim();
    const ip = document.getElementById('ip_address').value.trim();
    
    if (!name || !ip) {
        e.preventDefault();
        alert('请填写所有必填字段');
        return;
    }
    
    // 简单的IP格式验证
    const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
    if (!ipRegex.test(ip)) {
        e.preventDefault();
        alert('请输入有效的IP地址格式');
        return;
    }
});
</script>
{% endblock %}
